<template>
  <div class="case-com">
    <title-com :title="title"></title-com>
    <swiper  :options="swiperOption" class="mt-5">
      <swiper-slide :key="index" v-for="(item,index) in list">
        <div @click="go(item)"  class="wrap">
          <img :src="getUrl(item.img)" alt="">
          <span class="text">{{item.title}}</span>
        </div>
      </swiper-slide>
      <!--箭头-->
      <div class="swiper-button-prev icon iconfont icon-cc-arrow-left-circle" slot="button-prev"></div>
      <div class="swiper-button-next icon iconfont icon-cc-arrow-right-circle" slot="button-next"></div>
    </swiper>
  </div>
</template>

<script>
  import titleCom from "./titleCom"
  import { swiper, swiperSlide } from 'vue-awesome-swiper'

  export default {
    props:['title', 'list'],
    computed: {},
    data() {
      return {
        banners:[
          require('../../assets/images/banner-1.jpg'),
        ],
        swiperOption: {
          slidesPerView :3,
          breakpoints: {
            //当宽度小于等于640
            768: {
              slidesPerView: 2
            },
            //当宽度小于等于640
            992: {
              slidesPerView: 3
            }
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          }
        }
      }
    },
    components: {
      titleCom,
      swiper,
      swiperSlide
    },
    mounted() {

    },
    methods: {
      getBg(url) {
        return {
          backgroundImage: 'url(' + url + ')'
        }
      },
      go(article) {
        this.$router.push({path:'/zhuanke/' + article.departmentId +'/anli/' + article.id })
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "~assets/style/public";

  .case-com{
    margin-top: 84/@size;
    img{
      max-width: 320/@size;
      max-height: 194/@size;
    }
    .icon{
      font-size: 30/@size;
      color: @icon-color;
    }
    .swiper-button-prev{
      left: 2/@size;
    }
    .swiper-button-next{
      right: 2/@size;
    }
    .swiper-wrapper{
      height: 277/@size;
      overflow: hidden;
    }
    .swiper-slide{
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow: hidden;
      justify-content: center;
      background: #FFFFFF;
      .wrap{
        border: 1px solid #E5E9F2;
        padding: 15/@size 10/@size 15/@size 10/@size;
        span{
          display: block;
          text-align: center;
          margin-top: 10/@size;
        }
      }

    }
  }



</style>
